<template>
  <!-- 饼状图选项按钮 -->
  <div class="pie_select">
    <el-radio-group v-model="selectLabel" size="large" @change="changeData">
      <el-radio-button label="sale_">销量</el-radio-button>
      <el-radio-button label="_money">销售额</el-radio-button>
    </el-radio-group>
    <el-select v-model="selectDay" class="m-2" placeholder="Select" size="large" @change="changeData">
      <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
    </el-select>
  </div>
  <!-- 饼状图 -->
  <div id="pie" class=""></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { EChartsOption, SeriesOption } from 'echarts'
import { watch, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue'
const props = defineProps<{ salePie: ISalePieModel[] }>()
const state = reactive({
  // 单选框 数据
  selectLabel: 'sale_',
  // 选择器 数据
  selectDay: 'yesterday',
  // 选择器 列表
  options: [
    { name: '昨天', value: 'yesterday' },
    { name: '今天', value: 'today' },
    { name: '前3天', value: 'three_days' },
    { name: '前7天', value: 'seven_days' },
    { name: '前14天', value: 'fourteen_days' },
    { name: '前30天', value: 'thirty_days' },
    { name: '前60天', value: 'sixty_days' },
  ],
  // 轮播图数据
  data: [] as { value: string; name: string }[],
})
const { selectDay, selectLabel, options } = toRefs(state)
// 选项按钮
const changeData = () => {
  type TypeKey = keyof ISalePieModel
  let key: TypeKey
  if (selectLabel.value === '_money') {
    key = (selectDay.value + selectLabel.value) as TypeKey
  } else {
    key = (selectLabel.value + selectDay.value) as TypeKey
  }
  // console.log(key)
  state.data = props.salePie.map((item) => ({ value: item[key] as string, name: item.name }))
  myChartFn()
}
// 创建 饼状图
let myChart: echarts.ECharts
const myChartFn = () => {
  // 基于准备好的dom，初始化echarts实例
  if (!myChart) {
    myChart = echarts.init(document.getElementById('pie') as HTMLElement)
  }
  // 绘制图表
  let option: EChartsOption = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(50,50,50,0.7)',
      borderColor: 'transparent',
      textStyle: { color: '#fff' },
    },
    legend: {
      height: 100,
      top: 20,
      right: 10,
      orient: 'vertical',
    },
    series: [
      {
        name: '',
        type: 'pie',
        left: '-30%',
        radius: ['40%', '70%'],
        label: {
          color: 'inherit',
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
        data: state.data,
      } as SeriesOption,
    ],
  }
  myChart.setOption(option)
}
// 监听父传子数据 设置饼状图数据
watch(
  () => props.salePie,
  () => {
    state.data = props.salePie.map((item) => ({ value: item.sale_yesterday, name: item.name }))
    myChartFn()
  }
)
// 窗口变化时更新 myChart
function onMyChart() {
  myChart.resize()
}
// 组件挂载完毕更新 myChart
onMounted(() => {
  window.addEventListener('resize', onMyChart)
})
// 组件要卸载的时候移除事件监听
onBeforeUnmount(() => {
  window.removeEventListener('resize', onMyChart)
})
</script>

<style lang="less" scoped>
.pie_select {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#pie {
  width: 100%;
  height: 400px;
  // background-color: pink;
}
</style>
